<template xmlns:el-radio="http://www.w3.org/1999/html">
  <div class="app-container" >
    <h2 class="text-center">{{ paper.paperName}}</h2>

    <el-row :gutter="24" style="margin-top: 50px">

      <el-col :span="8" class="text-center">
        考试时长：{{ paper.totalTime }}分钟
      </el-col>

      <el-col :span="8" class="text-center">
        考试总分：{{ paper.totalMark }}
      </el-col>

    </el-row>

    <el-card style="margin-top: 20px">
      <div v-for="(item, index) in paperData" >
          <!-- 单选题 -->
          <div v-if="item.quesType == '单选题'">
            <div>
              <p class="card-title" style="color: #00afff;margin-top: 30px">单选题</p>
              <p>{{ index + 1 }}.{{ item.quesName }}：</p>
            </div>
            <div>
              <el-row :gutter="24" class="card-line">
                <el-radio-group  style="display: flex; flex-direction: column;text-color:blue">
                 <el-radio label="A">A : {{item.sel_ContA}}</el-radio>
                 <el-radio label="B" style="margin-top: 40px">B : {{item.sel_ContB}}</el-radio>
                 <el-radio label="C" style="margin-top: 40px" >C : {{item.sel_ContC}}</el-radio>
                 <el-radio label="D" style="margin-top: 40px">D : {{item.sel_ContD}}</el-radio>
               </el-radio-group>
              </el-row>

            </div>
            <el-divider></el-divider>
          </div>
          <!-- 多选题 -->
          <div v-if="item.quesType == '多选题'">
            <div>
              <p class="card-title" style="color: yellowgreen;margin-top: 30px" >多选题</p>
              <p>{{ index + 1 }}.{{ item.quesName }}：</p>
            </div>
            <div>
              <el-row :gutter="24" class="card-line" style="display: flex; flex-direction: column">
                <el-checkbox>A: {{item.sel_ContA}}</el-checkbox>
                <el-checkbox  style="margin-top: 40px"> B: {{item.sel_ContB}}</el-checkbox>
                <el-checkbox style="margin-top: 40px"> C: {{item.sel_ContC}}</el-checkbox>
                <el-checkbox style="margin-top: 40px">  D: {{item.sel_ContD}}</el-checkbox>
              </el-row>
            </div>
            <el-divider></el-divider>
          </div>
          <!-- 问答题 -->
            <div v-if="item.quesType == '简答题'">
            <div>
              <p class="card-title" style="color: yellowgreen;margin-top: 30px">问答题</p>
              <p>{{ index + 1 }}.{{ item.quesName }}：</p>
            </div>
            <div>
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                style="margin-top: 20px"
                >
            </el-input>
            </div>
              <el-divider></el-divider>
          </div>
          <!-- 判断题 -->
          <div v-if= "item.quesType== '判断题'">
            <div>
              <p class="card-title" style="color: red;margin-top: 30px">判断题</p>
              <p>{{index + 1 }}.{{item.quesName}}:</p>
              <el-radio-group style="display: flex; flex-direction: column">
                 <el-radio label="true" >true</el-radio>
                 <el-radio label="false" style="margin-top: 40px">false</el-radio>
              </el-radio-group>
            </div>
            <el-divider></el-divider>
          </div>

      </div>
      </el-card>





  </div>

</template>

<style>



</style>

<script>
import {paperQuestionList,paperById} from "@/api/store/paper";

export default {
  name: "exam",
  data() {
    return {
      answers:"", //问答题
      selectRadio:[],
      selectsRadioList:[],
      judge:undefined,
      paperData:{}, //试卷数据
      paper:{},
      paperId:undefined, //试卷id
      quesOptions:[],
      quesName:undefined,
      quesId: undefined,
      form:{},
    };
  },
  created() {
    this.getRouterData();
  },
  methods: {
    //获取初始化数据
    getRouterData() {
      this.paperId = this.$route.params.paperId;
      paperQuestionList({paperId: this.$route.params.paperId}).then((response) => {
        this.paperData = response.data;
        this.loading = false;


      });
      paperById({paperId: this.$route.params.paperId}).then((response) => {
        this.paper = response.data;
        this.loading = false;
      });
    },

  }}






</script>

<style scoped>

</style>
